<template>
  <div>
  <el-tabs type="border-card" v-model="id" @tab-click="handleClick">
  <el-tab-pane></el-tab-pane>
  <el-tab-pane :label="i.lb" v-for="(i,j) in list" :key="j"></el-tab-pane>
    <div>
        <table align="center" width="1000">
            <tr>
                <th>菜品ID</th>
                <th>菜品图片</th>
                <th>菜品名称</th>
                <th>菜品价格</th>
                <th>菜品口味</th>
                <th>菜品介绍</th>
                <th>操作</th>
            </tr>
            <tr v-for="(k,v) in cp_list" :key="v">
                <td>{{k.id}}</td>
                <td>
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="url">{{k.img}}</el-image>
                </td>
                <td>{{k.name}}</td>
                <td>{{k.price}}</td>
                <td>{{k.taste}}</td>
                <td>{{k.js}}</td>
                <td><el-button @click="xiu(k.id)">修改</el-button><el-button @click="del(k.id)">删除</el-button></td>
            </tr>
        </table>
        <p>添加</p>
        <p>菜品ID<input type="text" v-model="obj.id"></p>
        <p>菜品图片<input type="text" v-model="obj.img"></p>
        <p>菜品名称<input type="text" v-model="obj.name"></p>
        <p>菜品价格<input type="text" v-model="obj.price"></p>
        <p>菜品口味<input type="text" v-model="obj.taste"></p>
        <p>菜品介绍<input type="text" v-model="obj.js"></p>
        <p>所属类型<input type="text" v-model="obj.l_id"></p>
        <p><el-button @click="add">添加</el-button></p>
        <!-- <p>修改</p>
        <p>菜品ID<input type="text" v-model="objs.id"></p>
        <p>菜品图片<input type="text" v-model="objs.img"></p>
        <p>菜品名称<input type="text" v-model="objs.name"></p>
        <p>菜品价格<input type="text" v-model="objs.price"></p>
        <p>菜品口味<input type="text" v-model="objs.taste"></p>
        <p>菜品介绍<input type="text" v-model="objs.js"></p>
        <p><el-button @click="gai">修改</el-button></p> -->
    </div>
</el-tabs>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            cp_list:[],
            put_list:[],
            id:"",
            url: 'http://127.0.0.1:5000/static/100.jpg',
            obj:{
                id:"",
                img:"",
                name:"",
                price:"",
                taste:"",
                js:"",
                l_id:""
            },
            objs:{
                id:"",
                img:"",
                name:"",
                price:"",
                taste:"",
                js:""
            }
        }
    },
    mounted(){
        this.leihq()
        this.cphq()
    },
    methods:{
        handleClick() {
        console.log();
               this.axios.get("user/lbxindex/"+this.id).then(res=>{
                this.cp_list = res.data.data
                this.leihq()
            })
        },
        leihq(){
            this.axios.get('user/leiindex').then(res=>{
                this.list = res.data.data
            })
        },
        cphq(){
            this.axios.get('user/cpindex').then(res=>{
                this.cp_list = res.data.data
            })
        },
        add(){
            this.axios.post('user/addindex',this.obj).then(res=>{
                console.log(res)
                this.cphq()
                alert("添加成功")
            })
        },
        del(id){
            this.axios.delete('user/delindex/'+id).then(res=>{
                console.log(res)
                this.cphq()
                alert("删除成功")
            })
        },
        xiu(id){
            this.axios.get('user/dtindex/'+id).then(res=>{
                this.objs = res.data.data
                this.objs = this.objs[0]
                this.cphq()
            })
        },
        // gai(){
        //     this.axios.put('user/putindex').then(res=>{
        //         console.log(res)
        //         this.cphq()
        //         alert("修改成功")
        //     })
        // }
    }

}
</script>

<style>

</style>